<template>
  <div id="app" class="flex">
    <sideNav ref="sideNavRef" @closeClick="getSideWidth" />
    <div class="flex_1 right_box">
      <!-- <div class="app_header">xxx</div> -->
      <router-view class="main_box" :style="mainBoxStyle" />
    </div>
  </div>
</template>
<script>
import sideNav from '@/components/sideNav/index.vue'
export default {
  name: 'app',
  components: {
    sideNav
  },
  data () {
    return {
      sideWidth: ''
    }
  },
  computed: {
    mainBoxStyle () {
      return {
        width: `calc(100vw - ${this.sideWidth}px)`
      }
    }
  },
  mounted () {
    this.getSideWidth()
  },
  methods: {
    getSideWidth () {
      let _this = this.$refs.sideNavRef
      this.sideWidth = _this.getWidth()
    }
  }
}
</script>

<style lang="less">
#app {
  --bgcThemeColor: #e6eaf8;
  --themeColor: #6d69dc;
  --lightThemeColor: #e5e6f8;

  .app_header {
    background: var(--bgcThemeColor);
    height: 30px;
  }

  .right_box {
    background: #fafafa;

    .main_box {
      padding: 20px 0;
      height: calc(100vh); //减去顶部高度
      overflow: auto;
    }
  }

}
</style>
